<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="preview/js/jquery-3.2.1.min.js"></script>
    <script src="preview/js/rem.js"></script>
    <title>大数据单模块-天气</title>
    <style>
        *{
            padding:0;
            margin:0;
            box-sizing: border-box;
        }
        /*html,body{width: 100%;height: 100%}*/
        .weather{
            /*width: 100%;height: 100%;*/
            font-size:0.14rem;!important;
            color:#b5b5b5;
        }
    </style>
</head>
<body>
    <div class="weather">
        <p class="city">修武</p>
        <p class="weatherLeft"></p>
        <p class="temperature"></p>
    </div>
</body>
<script>
    window.onresize = function(){
        pageRem(100,90);
    };
    window.onload = function(){
        pageRem(100,90);
        //天气
        var place = $(".city").text().trim();
        requestAnimationFrame(getweather);
        function getweather(){
            cancelAnimationFrame(getweather);
            $.ajax({
                url:"http://api.map.baidu.com/telematics/v3/weather",
                type:"get",
                data:{
                    location:place,
                    output:'json',
                    ak:'6tYzTvGZSOpYB5Oc2YGGOKt8'
                },
                /*预期服务器端返回的数据类型，假设我现在跨域了，我就改成jsonp 就可以了 */
                dataType:"jsonp",
                success:function(data){
                    var weatherData=data.results[0].weather_data;
                    $(".city").text(place);
                    $(".weatherLeft").text(weatherData[0].weather);
                    $(".temperature").text(weatherData[0].temperature);
                    requestAnimationFrame(getweather);
                }
            })

        }
    }
</script>
</html>